import React from 'react'
import { TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

class NavList extends React.Component{
  render() {
    const list = this.props.data.filter(item => !item.hide)
    return <div>
      <TabBar>
        { list.map( item => 
            <TabBar.Item 
              key={ item.path }
              title={ item.text }
              icon={<img src={require(`./${item.icon}.png`)} alt=""/>}
              selectedIcon={<img src={require(`./${item.icon}-active.png`)} alt="" />}
              selected={this.props.location.pathname === item.path}
              unselectedTintColor="#888" 
              tintColor="#33A3F4"
              barTintColor="#000" 
              onPress={() => {
                this.props.history.push(item.path)
              }}
            /> 
          ) 
        }
      </TabBar>
    </div>
  }
}

export default withRouter(NavList)